<template>
  <div>
    <div>
      <el-form ref="form" :model="searchParam" label-width="80px">
        <el-form-item label="商品名称">
          <el-input style="width: 350px" v-model="searchParam.keyword" placeholder="请输入你想搜索的商品"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList(searchParam)">立即搜索</el-button>
          <el-button>取消</el-button>
          <el-button @click="cart" type="primary">我的购物车</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card v-for="product in products" style="float: left" class="product">
      <div @click="toDetail(product.skuId)">
        <img :src="product.skuImg"
             class="image">
        <div style="align-items: center;">
          <div style="color: red;font-size: 18px">￥{{ product.skuPrice }}</div>
          <div style="padding: 11px;border-bottom: 10px">
            <span v-html="product.skuTitle"></span>
          </div>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>

import {listSku} from "@/api/product/sku";


export default {

  data() {
    return {
      abc: "albumPics\": \"http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ab46a3cN616bdc41.jpg,http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf5fN2522b9dc.jpg",

      currentDate: new Date(),

      searchParam: {
        keyword: '',//华为手机
        brandId: [],//[1,2]
        catalog3Id: '',
        sort: '',//skuPrice/desc
        hasStock: true,
        skuPrice: '',//20_20000
        attrs: [], //[1_3G:4G:5G,2_晓龙845]
        pageNum: 1,
      },

      products: [],

    }
  },
  created() {
    this.getList();
  },
  methods: {
    //查看详情
    toDetail(skuId) {
      this.$router.push({ path: '/product/item', query: { skuId: skuId } });
    },
    cart(){
      this.$router.push({ path: '/cart' });
    },
    getList() {
      listSku(this.searchParam).then(response => {
        this.products = response.data.products;

      })
    },
  }
};
</script>


<style>
.product {
  width: 290px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;

}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
